<template>
  <div>
    <div class="control-SceneGroup-page">
      <!-- aside -->
      <div class="manage-page-aside">
        <div class="head-section" style="overflow: hidden">
          <h3 class="table-head">网点场景分组：</h3>
          <el-select
            @change="organChangeEvent"
            v-model="organId"
            placeholder="请选择"
            value-key="item"
          >
            <el-option
              v-for="item in organOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div style="display: flex; justify-content: space-between">
          <div>
            <el-input
              v-model="Searchremark"
              @keydown.enter.native="searchEnter"
              onkeypress="if(event.keyCode == 13) return false;"
              placeholder="请输入名称内容"
              clearable
              style="width: 1.5rem; margin-right: 0.1rem"
            ></el-input>
            <el-button
              type="primary"
              style="margin-right: 0"
              @click="onSearchSubmit"
              class="search-mr"
              >查询</el-button
            >
          </div>
          <div>
            <el-button
              @click="handleAddSceneGroup"
              type="primary"
              plain
              size="medium"
              >新增
            </el-button>
          </div>
        </div>

        <div class="table-section" style="top: 1.1rem">
          <el-scrollbar wrap-class="scrollbar-wrapper" style="height: 100%">
            <el-table
              height="7.3rem"
              ref="refSceneGroupTable"
              :data="SceneGroupTableData"
              border
              highlight-current-row
              :row-class-name="tableRowClassName"
              @row-click="handleCurrentChange"
            >
              <el-table-column type="index" label="序号" width="60">
              </el-table-column>
              <el-table-column
                prop="sceneGroupName"
                label="分组名称"
                style="cursor: pointer"
              >
              </el-table-column>
              <el-table-column
                label="操作"
                :width="$store.getters.user.manager > 0 ? '150' : '100'"
              >
                <template slot-scope="scope">
                  <el-button
                    @click.stop="handleEditSceneGroup(scope.row)"
                    type="primary"
                    plain
                    size="mini"
                    >编辑
                  </el-button>
                  <el-button
                    @click.stop="handleDeleteSceneGroup(scope.row)"
                    type="primary"
                    plain
                    size="mini"
                    >删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-scrollbar>
        </div>
      </div>
      <!-- content -->
      <div class="content manage-page-content">
        <div class="head-section">
          <header>
            <el-button
              @click="handleAddAreaAppliance"
              v-if="SceneGroupId != null"
              size="medium"
              type="primary"
              plain
              >添加
            </el-button>
            <el-button
              @click="handleDeleteAreaAppliance"
              v-if="SceneGroupId != null"
              size="medium"
              type="primary"
              plain
              >移除
            </el-button>
          </header>
          <h3 class="table-head">包含的电器</h3>
        </div>
        <div class="table-section">
          <el-table
            :data="SceneGroupAppliancesData"
            ref="equipmentTable"
            height="7.58rem"
            @selection-change="handleManageAreaChange"
            border
            style="width: 100%; margin-top: 10px"
          >
            <el-table-column type="selection" width="40"> </el-table-column>
            <el-table-column type="index" label="序号" width="50">
            </el-table-column>
            <el-table-column prop="channelName" label="名称"> </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!-- 新增组弹框 -->
    <el-dialog
      class="same-dia"
      :title="isAddNew ? '新增分组' : '编辑分组'"
      :visible.sync="dialogSceneGroupVisible"
      width="480px"
      @close="resetForm"
      :close-on-click-modal="false"
    >
      <el-form
        :rules="rules"
        :model="pojoSceneGroup"
        ref="pojoForm"
        label-width="90px"
      >
        <el-form-item label="名称：" prop="sceneGroupName">
          <el-input v-model="pojoSceneGroup.sceneGroupName"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button
          v-if="isAddNew"
          type="primary"
          @click="addSceneGroupSubmit('pojoForm')"
          >确 定
        </el-button>
        <el-button
          v-else
          type="primary"
          @click="editSceneGroupSubmit('pojoForm')"
          >确 定
        </el-button>
        <el-button @click="dialogSceneGroupVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加设备 -->
    <el-dialog
      title="添加设备"
      :visible.sync="dialogAddAreaVisible"
      width="610px"
      @close="reGetUserBindAreaData"
      :close-on-click-modal="false"
    >
      <div style="margin-bottom: 10px">
        <span style="color: #fff">设备所属区域：</span>
        <el-cascader
          :options="AreaByOrgandata"
          :props="ProbeChannelProps"
          v-model="areaid"
          @change="handleChange"
          filterable
          clearable
        >
        </el-cascader>
      </div>
      <div class="prodtransfer">
        <el-transfer
          :render-content="renderFunc"
          filterable
          ref="prodtransfer"
          filter-placeholder="请输入设备名称"
          :titles="['未加入设备', '已加入设备']"
          v-model="proadvalue"
          :data="prodlistdata"
          :props="prodprops"
        >
        </el-transfer>
      </div>
      <div slot="footer" class="dialog-footer">
        <div class="sub-can-btn-box">
          <el-button @click="submitAddManageArea" size="medium" type="primary"
            >确 定
          </el-button>
          <el-button size="medium" @click="dialogAddAreaVisible = false"
            >取 消
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script src="./index.js"></script>
<style lang="stylus" src="./index.styl" scoped></style>

